<template>
  <view class="container">
    <u-navbar
      back-icon-color="#333"
      title="授权登录"
      title-color="#333"
      title-size="36"
      :border-bottom="false"
      :is-back="false"
    >
      <view class="slot-content" @click="goToBack">
        <u-icon name="close" size="30"></u-icon>
      </view>
    </u-navbar>
    <view class="contentView">
      <u-icon class="logoIcon" size="200" :name="`${getImageUrl('logo.png')} `"></u-icon>
      <button
        v-if="isSelected"
        class="loginView"
        open-type="getPhoneNumber"
        @getphonenumber="onGetPhone"
      >
        手机号快捷登录
      </button>
      <view v-else class="loginView" @click="onAuthorize">手机号快捷登录</view>
      <view class="cancelView" @click="goToBack()">取消</view>
      <view class="checkView dis-flex" @click="onSelected">
        <u-icon size="36" class="checkIcon" name="/static/selected.png" v-if="isSelected"></u-icon>
        <u-icon size="36" class="checkIcon" name="/static/unselect.png" v-else></u-icon>
        <view class="checkText"
          >我已阅读并同意
          <text @click.stop.prevent="onPolicy('service_agreement')">《用户协议》</text>
          和
          <text @click.stop.prevent="onPolicy('privacy_policy')">《隐私协议》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      isSelected: false,
      phoneNumber: '',
      logoUrl: '',
      isLogin: false,
      openid: '',
      code: ''
    }
  },
  onShow() {
    // 已登录的情况下不允许跳转到登录页
    if (this.$utils.isLogin()) {
      this.$utils.loginToBack()
    }
  },
  methods: {
    goToBack() {
      this.$utils.loginToBack()
    },
    onPolicy(key) {
      this.$utils.route({
        url: '/universal/webcontent/webcontent',
        params: {
          key
        }
      })
    },
    onAuthorize() {
      if (!this.isSelected) {
        this.$u.toast('请仔细阅读并同意《用户协议》和《隐私协议》')
      }
    },
    onSelected() {
      const self = this
      self.isSelected = !self.isSelected
      if (!self.isSelected) {
        return
      }
      uni.login({
        provider: 'weixin',
        success: (res) => {
          console.debug('weixin silent login', res)
          self.code = res.code
        },
        fail: (err) => {
          console.log('weixin silent login', err)
        }
      })
    },
    onGetPhone(e) {
      const self = this
      if (self.$u.test.isEmpty(self.code)) {
        self.$u.toast('微信授权登录失败')
        return
      }
      if (self.$u.test.isEmpty(e.detail.code)) {
        self.$u.toast('请先授权获取手机号')
        return
      }
      self.$u.api
        .setWechatLogin({
          loginCode: self.code,
          phoneCode: e.detail.code,
          state: self.code,
          inviteCode: uni.getStorageSync('saleMemberNo') || ''
        })
        .then((res) => {
          if (Number(res.code) !== 0) {
            self.$u.toast(res.msg)
            return
          }
          uni.setStorageSync('tokenInfo', res.data)
          self.$u.api.getUserInfo().then((res) => {
            uni.setStorageSync('userInfo', res.data)
            uni.$emit('resatrt')
            uni.$emit('msgList')
            self.$utils.loginToBack()
          })
        })
    }
  }
}
</script>

<style scoped>
@import url('wx-login.css');

.slot-content {
  margin-left: 20rpx;
}

.logoIcon {
  width: 200rpx;
  height: 200rpx;
}

.container {
  height: 100vh;
  background-color: #ffffff !important;
}
</style>
